<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8" isELIgnored="false"%>
<%@ include file="/WEB-INF/views/shared/taglib.jsp"%>

<%@ include file="/WEB-INF/views/shared/base/master/limitless/default/demo/contentHeader.jsp"%>
<%@ include file="/WEB-INF/views/shared/base/css/limitless/default/animate.jsp"%>

<script type="text/javascript">
	$(function(){
		alert("123qwe");
		$("#aspectRatio2").attr("checked",true);
		$("#demo-cropper-image").cropper({
			aspectRatio:1/1,
			preview: '.preview',
			minContainerWidth:200,
			minContainerHeight:250,
			height:250,
			background:false,
			highlight:false,
			scalable:false,
			responsive :false,
			modal:false,
			viewModel :1,
		});
	});
</script>

<script type="text/javascript">
	/*$(function(){
		
		var avatar=$("#avatar").val();
		if(avatar.length!=0){
			$("#photo").attr("src","${t_virtualpath}/"+avatar);
			$("#demo-cropper-image").attr("src","${t_virtualpath}/"+avatar);
		}
		var $cropper = $(".cropper");
		 $cropper.cropper({
			 preview: '.preview',
			 minContainerWidth:200,
			 minContainerHeight:250,
			 height:250,
			 background:false,
			 highlight:false,
			 scalable:false,
			 responsive :false,
			 modal:false,
			 viewModel :1,
			 data: {
	            x: 50,
	            y: 22
	        }
		 })
		var options={}
		options.links=[];
		options.links.push({id:'country',selector:'#country',paramName:'country',depend:'first'});
		options.links.push({id:'province',selector:'#province',paramName:'province',depend:'country'});
		options.links.push({id:'city',selector:'#city',paramName:'city',depend:'province'});
	
	
		$.linker(options);
	})
    function save(){

		var imgdata=$cropper.cropper('getCroppedCanvas');
		var mydata=imgdata.toDataURL('image/jpg');
		$("#photo").attr("src",mydata);
		$("#avatar").val(mydata);
		$('#myModal1').modal('hide');
	}
	function saveData(){
		if (!$("form:first").valid()){
			return;
		}
		$("form:first").submit();
	}	
	function preview(data,type){
		if(type=="image/jpg"||type=="image/png"||type=="image/jpeg"){
		if(data=="")return;
		$cropper = $(".cropper");
		$cropper.cropper("replace",data);
		}else {
			alert("暂只支持png或jpg格式或jpeg格式");
		}
	}
	function openModal(){
		$('#myModal1').modal('show');
	}
	function photoSelect(){
		window.frames["select"].$("#inputOpen").click();
	}*/
</script>


<!-- Cropper demonstration -->
<div class="panel panel-flat">

	<div class="panel-body">
		<div class="row">
			<div class="col-md-6">
				<div class="image-cropper-container content-group" style="height: 400px;">
					<img src="<c:url value='/images/default_avatar.jpg'/>" alt="" class="cropper" id="demo-cropper-image">
				</div>

				<div class="form-group demo-cropper-toolbar">
					<label class="text-semibold control-label">Toolbar:</label>
					<div class="btn-group btn-group-justified">
						<div class="btn-group">
							<button type="button" class="btn bg-blue btn-icon" data-method="setDragMode" data-option="move" title="Move">
								<span class="icon-move"></span>
							</button>
						</div>

						<div class="btn-group">
							<button type="button" class="btn bg-blue btn-icon" data-method="setDragMode" data-option="crop" title="Crop">
								<span class="icon-crop2"></span>
							</button>
						</div>

						<div class="btn-group">
							<button type="button" class="btn bg-blue btn-icon" data-method="move" data-option="-10" data-second-option="0" title="Move Left">
								<span class="icon-arrow-left13"></span>
							</button>
						</div>

						<div class="btn-group">
							<button type="button" class="btn bg-blue btn-icon" data-method="move" data-option="10" data-second-option="0" title="Move Right">
								<span class="icon-arrow-right14"></span>
							</button>
						</div>

						<div class="btn-group">
							<button type="button" class="btn bg-blue btn-icon" data-method="move" data-option="0" data-second-option="-10" title="Move Up">
								<span class="icon-arrow-up13"></span>
							</button>
						</div>

						<div class="btn-group">
							<button type="button" class="btn bg-blue btn-icon" data-method="move" data-option="0" data-second-option="10" title="Move Down">
								<span class="icon-arrow-down132"></span>
							</button>
						</div>
					</div>
				</div>

				<div class="form-group demo-cropper-toolbar">
					<div class="btn-group btn-group-justified">
						<div class="btn-group">
							<button type="button" class="btn bg-blue btn-icon" data-method="zoom" data-option="0.1" title="Zoom In">
								<span class="icon-zoomin3"></span>
							</button>
						</div>

						<div class="btn-group">
							<button type="button" class="btn bg-blue btn-icon" data-method="zoom" data-option="-0.1" title="Zoom Out">
								<span class="icon-zoomout3"></span>
							</button>
						</div>

						<div class="btn-group">
							<button type="button" class="btn bg-blue btn-icon" data-method="rotate" data-option="-45" title="Rotate Left">
								<span class="icon-rotate-ccw3"></span>
							</button>
						</div>

						<div class="btn-group">
							<button type="button" class="btn bg-blue btn-icon" data-method="rotate" data-option="45" title="Rotate Right">
								<span class="icon-rotate-cw3"></span>
							</button>
						</div>

						<div class="btn-group">
							<button type="button" class="btn bg-blue btn-icon" data-method="scaleX" data-option="-1" title="Flip Horizontal">
								<span class="icon-flip-vertical4"></span>
							</button>
						</div>

						<div class="btn-group">
							<button type="button" class="btn bg-blue btn-icon" data-method="scaleY" data-option="-1" title="Flip Vertical">
								<span class="icon-flip-vertical3"></span>
							</button>
						</div>
					</div>
				</div>

				<div class="form-group">
					<label class="text-semibold control-label">Crop:</label>
					<div class="btn-group btn-group-justified demo-cropper-toolbar">
						<div class="btn-group">
							<button type="button" class="btn btn-default" data-method="getCroppedCanvas">
								Get Cropped Canvas
							</button>
						</div>

						<div class="btn-group">
							<button type="button" class="btn btn-default" data-method="getCroppedCanvas" data-option="{ &quot;width&quot;: 150, &quot;height&quot;: 150 }">
								150&times;150
							</button>
						</div>

						<div class="btn-group">
							<button type="button" class="btn btn-default" data-method="getCroppedCanvas" data-option="{ &quot;width&quot;: 120, &quot;height&quot;: 120 }">
								120&times;120
							</button>
						</div>

						<div class="btn-group">
							<button type="button" class="btn btn-default" data-method="getCroppedCanvas" data-option="{ &quot;width&quot;: 90, &quot;height&quot;: 90 }">
								90&times;90
							</button>
						</div>

						<div class="btn-group">
							<button type="button" class="btn btn-default" data-method="getCroppedCanvas" data-option="{ &quot;width&quot;: 60, &quot;height&quot;: 60 }">
								60&times;60
							</button>
						</div>
					</div>

					<!-- Modal with cropped image -->
					<div class="modal fade docs-cropped" id="getCroppedCanvasModal" tabindex="-1">
						<div class="modal-dialog">
							<div class="modal-content">
								<div class="modal-header">
									<button type="button" class="close" data-dismiss="modal">&times;</button>
									<h6 class="modal-title" id="getCroppedCanvasTitle">Cropped</h6>
								</div>
								<div class="modal-body text-center"></div>
								<div class="modal-footer">
									<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
									<a href="#" class="btn btn-primary" id="download" download="cropped.jpg">Download</a>
								</div>
							</div>
						</div>
					</div>
					<!-- /modal with cropped image -->

				</div>

				<div class="form-group">
					<label class="text-semibold control-label">Aspect ratio:</label>
					<div class="btn-group btn-group-justified demo-cropper-ratio" data-toggle="buttons">
						<label class="btn btn-default">
							<input type="radio" class="sr-only" id="aspectRatio0" name="aspectRatio" value="1.7777777777777777">
							16:9
						</label>
						<label class="btn btn-default">
							<input type="radio" class="sr-only" id="aspectRatio1" name="aspectRatio" value="1.3333333333333333">
							4:3
						</label>
						<label class="btn btn-default">
							<input type="radio" class="sr-only" id="aspectRatio2" name="aspectRatio" value="1">
							1:1
						</label>
						<label class="btn btn-default">
							<input type="radio" class="sr-only" id="aspectRatio3" name="aspectRatio" value="0.6666666666666666">
							2:3
						</label>
						<label class="btn btn-default">
							<input type="radio" class="sr-only" id="aspectRatio4" name="aspectRatio" value="NaN">
							Free
						</label>
					</div>
				</div>

				<div class="form-group no-margin-bottom">
					<div class="row">
						<div class="col-sm-4">
							<div class="checkbox checkbox-switchery switchery-double switchery-xs text-center">
								<label>
									Clear
									<input type="checkbox" class="clear-crop-switch" checked="checked">
									Crop
								</label>
							</div>
						</div>

						<div class="col-sm-4">
							<div class="checkbox checkbox-switchery switchery-double switchery-xs text-center">
								<label>
									Disable
									<input type="checkbox" class="enable-disable-switch" checked="checked">
									Enable
								</label>
							</div>
						</div>

						<div class="col-sm-4">
							<div class="checkbox checkbox-switchery switchery-double switchery-xs text-center">
								<label>
									Destroy
									<input type="checkbox" class="destroy-create-switch" checked="checked">
									Create
								</label>
							</div>
						</div>
					</div>
				</div>
			</div>

			<div class="col-md-6">
				<div class="content-group text-center">
					<div class="eg-preview">
						<div class="preview preview-lg"></div>
						<div class="preview preview-md"></div>
						<div class="preview preview-sm"></div>
						<div class="preview preview-xs"></div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<!-- /cropper demonstration -->

<%@ include file="/WEB-INF/views/shared/base/scripts/limitless/default/media.jsp"%>
<%@ include file="/WEB-INF/views/shared/base/scripts/limitless/default/formstyling.jsp"%>
<%@ include file="/WEB-INF/views/shared/base/scripts/limitless/default/pages/extension/extension_image_cropper.jsp"%>
<%@ include file="/WEB-INF/views/shared/base/master/limitless/default/demo/contentFooter.jsp"%>
